<!doctype html>
<html>
<head>

    <title>jsPlumb - scrollable lists demonstration</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">

    <link rel="stylesheet" href="node_modules/@jsplumb/browser-ui/css/jsplumbtoolkit.css">
    <link rel="stylesheet" href="../demo.css">

</head>

    <body>
    <!-- content -->
        <div class="jtk-demo-main">
            <div class="jtk-demo-canvas" id="canvas">

                <div class="list list-lhs" id="list-one">
                    <h3>LIST ONE</h3>
                    <ul source>
                        <li>item one</li>
                        <li>item two</li>
                        <li>item three</li>
                        <li>item four</li>
                        <li>item five</li>
                        <li>item six</li>
                        <li>item seven</li>
                        <li>item eight</li>
                        <li>item nine</li>
                        <li>item ten</li>
                        <li>item eleven</li>
                        <li>item twelve</li>
                        <li>item thirteen</li>
                        <li>item fourteen</li>
                        <li>item fifteen</li>
                        <li>item sixteen</li>
                        <li>item seventeen</li>
                        <li>item eighteen</li>
                        <li>item nineteen</li>
                        <li>item twenty</li>
                        <li>item twenty one</li>
                        <li>item twenty two</li>
                        <li>item twenty three</li>
                        <li>item twenty four</li>
                        <li>item twenty five</li>
                        <li>item twenty six</li>
                        <li>item twenty seven</li>
                        <li>item twenty eight</li>
                        <li>item twenty nine</li>
                        <li>item thirty</li>
                        <li>item thirty one</li>
                        <li>item thirty two</li>
                        <li>item thirty three</li>
                        <li>item thirty four</li>
                    </ul>
                </div>

                <div class="list list-rhs" id="list-two">
                    <h3>LIST TWO</h3>
                    <ul jtk-scrollable-list target>
                        <li>item one</li>
                        <li>item two</li>
                        <li>item three</li>
                        <li>item four</li>
                        <li>item five</li>
                        <li>item six</li>
                        <li>item seven</li>
                        <li>item eight</li>
                        <li>item nine</li>
                        <li>item ten</li>
                        <li>item eleven</li>
                        <li>item twelve</li>
                        <li>item thirteen</li>
                        <li>item fourteen</li>
                        <li>item fifteen</li>
                        <li>item sixteen</li>
                        <li>item seventeen</li>
                        <li>item eighteen</li>
                        <li>item nineteen</li>
                        <li>item twenty</li>
                        <li>item twenty one</li>
                        <li>item twenty two</li>
                        <li>item twenty three</li>
                        <li>item twenty four</li>
                        <li>item twenty five</li>
                        <li>item twenty six</li>
                        <li>item twenty seven</li>
                        <li>item twenty eight</li>
                        <li>item twenty nine</li>
                        <li>item thirty</li>
                        <li>item thirty one</li>
                        <li>item thirty two</li>
                        <li>item thirty three</li>
                        <li>item thirty four</li>
                    </ul>
                </div>

            </div>

            <div class="description">
                <i class="fa fa-info-circle"></i>
                <h4>List items</h4>
                <p>
                    Demonstrates how to connect items in lists.
                </p>
                <p>
                    The list on the left is configured manually via an `addList` call on the jsPlumb instance:
                </p>
<pre>
instance.addList(list1Ul, {
    endpoint:["Rectangle", {width:20, height:20}]
});
</pre>
                <p>
                    The list on the right is configured automatically because it has a `jtk-scrollable-list` attribute set in the DOM.
                    This list's placeholder endpoint is configured via the `ListStyle` default on the instance:
                </p>
<pre>
var instance = jsPlumbBrowserUI.getInstance({
    connector: "Straight",
    paintStyle: { strokeWidth: 3, stroke: "#ffa500", "dashstyle": "2 4" },
    endpoint: [ "Dot", { radius: 5 } ],
    endpointStyle: { fill: "#ffa500" },
    container: "canvas",
    listStyle:{
        endpoint:[ "Rectangle", { width:30, height:30 }]
    }
});
</pre>
                <p>
                    When you scroll a list and a connected item inside of it leaves the list's viewport, any connections to that item are stacked on a placeholder endpoint
                    on the list element. You can control the location of the anchor used, and the appearance of the endpoint, in the options to
                    the <strong>addList</strong> method call and in the `ListStyle` default for the instance.
                </p>
                <div id="controls">
                        <p>Uncheck/check these to see the difference between a configured list and the default setup.</p>
                    <label>
                        <input type="checkbox" checked value="list1">Toggle List 1
                    </label>
                    <label>
                        <input type="checkbox" checked value="list2">Toggle List 2
                    </label>
                </div>
            </div>

        </div>

        <!-- /content -->
        <script src="_build/demo.umd.js"></script>

    </body>
</html>
